﻿@{
    ViewBag.Title = "实验员管理";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="mainCont" style=" margin-top: -20px">
    <div>
        <button type="button" class="btn btn-default" id="btnSearch">筛选</button>
    </div>
    <div class="searchCont" style="width: 50%">
        <!-- jqGrid table list4 -->
        <table id="promotergrid"></table>
        <!-- jqGrid 分页 div gridPager -->
        <div id="gridPager"></div>
    </div>

    <div style="margin-top:10px;margin-left:20px;cursor:pointer" data-toggle="modal" data-target="#addPromoter">
        <img src="@TrialManagementTool.Helper.UrlHelper.alterContent("Images/add.png")" style="margin-top:-5px ;height:15px" />
        <span style="color:#00985f;text-decoration:underline;margin-left:5px;font-size:18px">添加人员</span>
    </div>
    <!-- 添加 Modal -->
    <div class="modal " id="addPromoter" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-650" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新增人员</h4>
                </div>
                <div class="modal-body informEditPop">
                    <div class="text-l" style="padding:0 30px 10px; vertical-align:top;">
                        <span style="vertical-align:top">姓&nbsp;&nbsp;&nbsp;名:</span><input id="ChineseName" style="margin-left:20px; resize:none;" />
                    </div>
                    <div class="text-l" style="padding:0 30px 10px; vertical-align:top;">
                        <span style="vertical-align:top">用户名:</span><input id="UserName" style="margin-left:20px; resize:none;" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-default" id="addPromoterConfirm">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $().ready(function () {
        $("#promotergrid").jqGrid({
            url: fixUrl("api/Promoter/GetAllPromoterCity"),
            Regional: "cn",
            datatype: "json", //数据来源，本地数据
            mtype: "GET",//提交方式
            height: "auto",//高度，表格高度。可为数值、百分比或'auto'
            //width:1000,//这个宽度不能为百分比
            autowidth: true,//自动宽
            colNames: ['人员', '地点', '是否可用', ''],
            colModel: [
                //{name:'id',index:'id', width:'10%', align:'center' },
                { name: 'ChineseName', index: 'ChineseName', width: '15%', align: 'center', searchoptions: { sopt: ['cn'] } },
                { name: 'Citys', index: 'Citys', width: '25%', align: "center", searchoptions: { sopt: ['cn'] } },
                 { name: 'IsActive', index: 'IsActive', width: '10%', align: "center", search: false, formatter: function (value, grid, rows, state) { return FormatRow(value, grid, rows, state) } },
            { name: 'ID', index: 'ID', width: '15%', align: "center", search: false, sortable: false, formatter: function (value, grid, rows, state) { return "<a href=" + fixUrl("Promoter/Detail?id=" + value) + "  class='btn btn-default'>管理</a>" } },
            ],
            //rownumbers: true,//添加左侧行号
            //altRows:true,//设置为交替行表格,默认为false
            //sortname:'createDate',
            //sortorder:'asc',
            viewrecords: true,//是否在浏览导航栏显示记录总数
            rowNum: 999,//每页显示记录数
            rowList: [20, 50, 100],//用于改变显示行数的下拉列表框的元素数组。
            jsonReader: {
                id: "ID",
            },
            onSortCol: function (index, colindex, sortorder) {
                //列排序事件，向server传值，值为当前的页数
                jQuery("#promotergrid").jqGrid('setGridParam', { page: $('#gridPager').val() });
            },
            gridComplete: function () {
                if ($("#sp_1_gridPager").text() == 1) {
                    $(".ui-pg-input").attr('disabled', 'disabled')
                }
                var ids = $("#promotergrid").getDataIDs();
                for (var i = 0; i < ids.length; i++) {
                    var rowData = $("#promotergrid").getRowData(ids[i]);
                    if (rowData.IsActive.indexOf('uncheck') > 0) {//Inactive，则背景色置灰显示
                        $('#' + ids[i]).find("td").addClass("NonActiveBG");
                    }
                }
                //$("#promotergrid").filterToolbar();
            },
            loadonce: true,
            pagination: true,
            //pager: $('#gridPager')
        });
        // 隐藏水平滚动条
        $("#promotergrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x": "hidden" });

        // 显示垂直滚动条
        $("#promotergrid").closest(".ui-jqgrid-bdiv").css({ "overflow-y": "scroll", "max-height": "450px" });


        //JQ grid 自适应宽度
        $(window).resize(function () {

            $("#promotergrid").setGridWidth($('.searchCont').width() * 0.99);

        });
    })

    function FormatRow(value, grid, rows, state) {
        if (value == true) {
            return "<img onclick='PromoterStatusChange(" + grid.rowId + ")' data-val='1' id=Promoterid_" + grid.rowId + " src=" + fixUrl("Images/check.png") + " style='cursor:pointer;width:22px;height:22px'/>"
        } else {
            return "<img onclick='PromoterStatusChange(" + grid.rowId + ")' data-val='0' id=Promoterid_" + grid.rowId + " src=" + fixUrl("Images/uncheck.png") + " style='cursor:pointer;width:22px;height:22px'>"
        }
    }

    function PromoterStatusChange(id) {
        var val = $("#Promoterid_" + id).attr('data-val');
        if (val == 1) {
            $.ajax({
                url: fixUrl("api/Promoter/UpdatePromoterStatus"),
                type: "post",
                data: { ID: id },
                success: function (data) {
                    AlertCompleteBox("状态修改成功")
                    //current is active
                    $("#Promoterid_" + id).attr('data-val', 0);
                    $("#Promoterid_" + id).attr("src", "@TrialManagementTool.Helper.UrlHelper.alterContent("Images/uncheck.png")");
                    $(" #" + id).children().addClass("NonActiveBG");
                }
            });
        } else {
            $.ajax({
                url: fixUrl("api/Promoter/UpdatePromoterStatus"),
                type: "post",
                data: { ID: id },
                success: function (data) {
                    AlertCompleteBox("状态修改成功")
                    //current is inactive
                    $("#Promoterid_" + id).attr('data-val', 1);
                    $("#Promoterid_" + id).attr("src", "@TrialManagementTool.Helper.UrlHelper.alterContent("Images/check.png")");
                    $(" #" + id).children().removeClass("NonActiveBG");
                }
            });
        }
    }
    $("#btnSearch").on("click", function () {
        jQuery("#promotergrid").jqGrid('searchGrid', { multipleSearch: true });

    })
    $("#addPromoterConfirm").on("click", function () {
        if ($("#ChineseName").val().length <= 0 || $("#UserName").val().length <= 0) {
            AlertWarnBox("请填写完成后提交");
        } else {
            $.ajax({
                url: fixUrl("/api/Promoter/AddPromoter"),
                type: "post",
                data: { ChineseName: $("#ChineseName").val(), UserName: $("#UserName").val() },
                success: function (data) {
                    $("#addPromoter").modal('hide');
                    $("#ChineseName").val('');
                    $("#UserName").val('');
                    AlertCompleteBox("新增人员成功");
                    $("#promotergrid").jqGrid('setGridParam', {
                        url: fixUrl("api/Promoter/GetAllPromoterCity"),
                        datatype: 'json',
                        page: 1
                    }).trigger("reloadGrid"); //重新载入
                },
                error: function (data) {
                    AlertErrorBox("存在相同用户信息");
                }
            });
        }
    })
</script>
